<script>
import {doGet} from "../http/httpRequest.js";
import * as echarts from 'echarts';

export default {
  name: "StatisticView",

  data() {
    return {
      //摘要数据对象
      summaryData: {}
    }
  },

  methods: {
    //加载摘要
    loadSummary() {
      doGet("/api/summary/data", {}).then(resp => {
        if (resp.data.code == 200) {
          this.summaryData = resp.data.data;
        }
      })
    },

    //加载销售漏斗图
    loadSaleFunnelChart() {

      //先查询出数据,在渲染图
      doGet("/api/saleFunnerl/data", {}).then(resp => {
        if (resp.data.code == 200) {
          let saleFunnelData = resp.data.data;
          //拿到页面上渲染图表的元素
          var chartDom = document.getElementById('saleFunnelChart');
          //使用echart进行初始化，得到一个空白的图表对象
          var myChart = echarts.init(chartDom);
          //配置可选项(查看配置项手册)
          var option = {
            //标题组件
            title: {
              //主标题文本 \n换行
              text: '销售漏斗图',
              left: 'center',
              top: 'bottom'
            },
            //提示框组件
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c}%'
            },
            //工具栏
            toolbox: {
              feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
              }
            },
            //图例组件
            legend: {
              data: ['线索', '客户', '交易', '成交']
            },
            //系列名称
            series: [
              {
                name: '销售漏斗数据统计',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                  show: true,
                  position: 'inside'
                },
                labelLine: {
                  length: 10,
                  lineStyle: {
                    width: 1,
                    type: 'solid'
                  }
                },
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 1
                },
                emphasis: {
                  label: {
                    fontSize: 20
                  }
                },
                //数据项
                data: saleFunnelData
              }
            ]
          };
          //如果配置了可选项，就把可选设置到图表对象中
          option && myChart.setOption(option);
        }
      })


    },

    //加载线索来源饼图
    loadSourcePieChart() {

      doGet("/api/sourcePie/data", {}).then(resp => {
        if (resp.data.code == 200) {
          let sourcePieData = resp.data.data;
          var chartDom = document.getElementById('sourcePieChart');
          var myChart = echarts.init(chartDom);
          var option;

          option = {
            title: {
              text: '线索来源统计',
              left: 'center',
              top: 'bottom'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'horizontal',
              left: 'center',
            },
            series: [
              {
                name: '线索来源统计',
                type: 'pie',
                radius: '60%',
                data: sourcePieData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          option && myChart.setOption(option);
        }
      })


    }
  },

  mounted() {
    this.loadSummary();

    this.loadSaleFunnelChart();

    this.loadSourcePieChart();
  }
}
</script>

<template>
  <!--数据概览-->
  <el-row>

    <el-col :span="6">
      <el-statistic :value="summaryData.effectiveActivityCount">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            市场活动
          </div>
        </template>
        <template #suffix>/{{ summaryData.totalActivityCount }}</template>
      </el-statistic>
    </el-col>


    <el-col :span="6">
      <el-statistic title="线索总数" :value="summaryData.totalClueCount"/>
    </el-col>


    <el-col :span="6">
      <el-statistic title="客户总数" :value="summaryData.totalCustomerCount"/>
    </el-col>


    <el-col :span="6">
      <el-statistic :value="summaryData.successTranAmount">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            交易总额
          </div>
        </template>
        <template #suffix>/{{ summaryData.totalTranAmount }}</template>
      </el-statistic>
    </el-col>


  </el-row>


  <!--销售漏斗图 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="saleFunnelChart" style="width: 48%;height:350px; margin-top: 10px;float: left"/>

  <!--线索来源饼图 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="sourcePieChart" style="width: 48%;height:350px; margin-top: 10px;float: left"/>
</template>

<style scoped>

.el-row {
  text-align: center;
}

</style>